<template>
  <Layout>
    <div class="loan-container">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-content">
          <h1 class="page-title">我的贷款</h1>
          <p class="page-subtitle">管理您的所有贷款信息，跟踪还款进度</p>
        </div>
        <div class="header-actions">
          <el-button 
            type="primary" 
            size="large" 
            @click="showLoanApplyDialog"
            class="primary-btn"
          >
            <el-icon><Plus /></el-icon>
            申请贷款
          </el-button>
        </div>
      </div>

      <!-- 顶部统计仪表板 -->
      <div class="dashboard-section">
        <div class="stats-grid">
          <div class="stat-card total-amount">
            <div class="stat-icon">
              <el-icon><CreditCard /></el-icon>
            </div>
            <div class="stat-content">
              <h3 class="stat-value">¥{{ formatAmount(loanSummary.totalLoanAmount) }}</h3>
              <p class="stat-label">总贷款金额</p>
              <div class="stat-trend">
                <span class="trend-icon">📈</span>
                <span class="trend-text">累计贷款总额</span>
              </div>
            </div>
            <div class="card-decoration"></div>
          </div>

          <div class="stat-card remaining-amount">
            <div class="stat-icon">
              <el-icon><Wallet /></el-icon>
            </div>
            <div class="stat-content">
              <h3 class="stat-value">¥{{ formatAmount(loanSummary.remainingAmount) }}</h3>
              <p class="stat-label">剩余待还</p>
              <div class="stat-progress">
                <div class="progress-bar">
                  <div 
                    class="progress-fill" 
                    :style="{ width: progressPercentage + '%' }"
                  ></div>
                </div>
                <span class="progress-text">还款进度{{ (100 - progressPercentage).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="card-decoration"></div>
          </div>

          <div class="stat-card next-payment">
            <div class="stat-icon">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stat-content">
              <h3 class="stat-value">¥{{ formatAmount(loanSummary.nextPaymentAmount) }}</h3>
              <p class="stat-label">下期还款</p>
              <div class="next-payment-info">
                <span class="payment-date">{{ loanSummary.nextPaymentDate || '暂无计划' }}</span>
                <el-tag 
                  :type="getPaymentUrgencyType()" 
                  size="small"
                  v-if="loanSummary.nextPaymentDate"
                >
                  {{ getDaysUntilPayment() }}天后
                </el-tag>
              </div>
            </div>
            <div class="card-decoration"></div>
          </div>

          <div class="stat-card loan-count">
            <div class="stat-icon">
              <el-icon><Files /></el-icon>
            </div>
            <div class="stat-content">
              <h3 class="stat-value">{{ loanSummary.loanCount }}</h3>
              <p class="stat-label">贷款笔数</p>
              <div class="loan-status-breakdown">
                <div class="status-item">
                  <span class="status-dot active"></span>
                  <span>{{ getActiveLoansCount() }}笔进行中</span>
                </div>
                <div class="status-item">
                  <span class="status-dot completed"></span>
                  <span>{{ getCompletedLoansCount() }}笔已结清</span>
                </div>
              </div>
            </div>
            <div class="card-decoration"></div>
          </div>
        </div>
      </div>

      <!-- 快捷操作区域 -->
      <div class="quick-actions-section">
        <h2 class="section-title">快捷操作</h2>
        <div class="action-grid">
          <div class="action-card" @click="showRepaymentDialog" :class="{ disabled: !hasActiveLoan }">
            <div class="action-icon repayment">
              <el-icon><Money /></el-icon>
            </div>
            <div class="action-content">
              <h4>立即还款</h4>
              <p>快速完成当期还款</p>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="action-card" @click="showEarlyRepaymentDialog" :class="{ disabled: !hasActiveLoan }">
            <div class="action-icon early-repayment">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="action-content">
              <h4>提前还款</h4>
              <p>减少利息支出</p>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="action-card" @click="safeLoadData">
            <div class="action-icon refresh">
              <el-icon><Refresh /></el-icon>
            </div>
            <div class="action-content">
              <h4>刷新数据</h4>
              <p>获取最新状态</p>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>

          <div class="action-card" @click="generateReport">
            <div class="action-icon report">
              <el-icon><Document /></el-icon>
            </div>
            <div class="action-content">
              <h4>账单报告</h4>
              <p>下载还款记录</p>
            </div>
            <div class="action-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 左侧：贷款列表 -->
        <div class="loans-section">
          <div class="section-header-modern">
            <div class="section-title-with-count">
              <h2 class="section-title">贷款列表</h2>
              <span class="count-badge">{{ loans.length }}笔</span>
            </div>
            <div class="section-controls">
              <el-select 
                v-model="loanFilters.status" 
                placeholder="筛选状态" 
                clearable 
                @change="safeLoadData"
                class="filter-select"
              >
                <el-option label="全部状态" value=""></el-option>
                <el-option label="审核中" :value="1"></el-option>
                <el-option label="已批准" :value="2"></el-option>
                <el-option label="还款中" :value="3"></el-option>
                <el-option label="已结清" :value="4"></el-option>
                <el-option label="已拒绝" :value="5"></el-option>
              </el-select>
              <el-button :icon="Refresh" @click="safeLoadData" :loading="loansLoading" circle></el-button>
            </div>
          </div>

          <div class="loans-list" v-loading="loansLoading">
            <div class="loan-card" v-for="loan in loans" :key="loan.id" @click="showLoanDetail(loan)">
              <div class="loan-card-header">
                <div class="loan-info">
                  <h3 class="loan-id">贷款 #{{ loan.id }}</h3>
                  <el-tag 
                    :type="getLoanStatusType(loan.status)" 
                    size="small"
                    class="status-tag"
                  >
                    {{ getLoanStatusText(loan.status) }}
                  </el-tag>
                </div>
                <div class="loan-amount">
                  <span class="amount-value">¥{{ formatAmount(loan.amount) }}</span>
                </div>
              </div>

              <div class="loan-card-body">
                <div class="loan-details-grid">
                  <div class="detail-item">
                    <span class="detail-icon">💰</span>
                    <div class="detail-info">
                      <span class="detail-label">剩余本金</span>
                      <span class="detail-value">¥{{ formatAmount(loan.remainingPrincipal) }}</span>
                    </div>
                  </div>
                  <div class="detail-item">
                    <span class="detail-icon">📅</span>
                    <div class="detail-info">
                      <span class="detail-label">贷款期限</span>
                      <span class="detail-value">{{ loan.loanTerm }}个月</span>
                    </div>
                  </div>
                  <div class="detail-item">
                    <span class="detail-icon">🔄</span>
                    <div class="detail-info">
                      <span class="detail-label">还款方式</span>
                      <span class="detail-value">{{ getRepaymentMethodText(loan.repaymentMethod) }}</span>
                    </div>
                  </div>
                  <div class="detail-item">
                    <span class="detail-icon">⏰</span>
                    <div class="detail-info">
                      <span class="detail-label">申请时间</span>
                      <span class="detail-value">{{ formatDate(loan.createTime) }}</span>
                    </div>
                  </div>
                </div>

                <!-- 还款进度条 -->
                <div class="repayment-progress" v-if="loan.status === 3">
                  <div class="progress-header">
                    <span class="progress-label">还款进度</span>
                    <span class="progress-percentage">{{ calculateLoanProgress(loan) }}%</span>
                  </div>
                  <div class="progress-track">
                    <div 
                      class="progress-bar-fill" 
                      :style="{ width: calculateLoanProgress(loan) + '%' }"
                    ></div>
                  </div>
                </div>
              </div>

              <div class="loan-card-footer">
                <div class="action-buttons">
                  <el-button 
                    size="small" 
                    @click.stop="showLoanDetail(loan)"
                    class="detail-btn"
                  >
                    <el-icon><View /></el-icon>
                    查看详情
                  </el-button>
                  <el-button 
                    size="small" 
                    @click.stop="showRepaymentPlan(loan)" 
                    v-if="loan.status === 3"
                    class="plan-btn"
                  >
                    <el-icon><Calendar /></el-icon>
                    还款计划
                  </el-button>
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click.stop="showRepaymentDialog" 
                    v-if="loan.status === 3"
                    class="repay-btn"
                  >
                    <el-icon><Money /></el-icon>
                    立即还款
                  </el-button>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div class="empty-state" v-if="loans.length === 0 && !loansLoading">
              <div class="empty-icon">📋</div>
              <h3>暂无贷款记录</h3>
              <p>您还没有任何贷款记录，点击上方按钮申请贷款</p>
              <el-button type="primary" @click="showLoanApplyDialog">
                <el-icon><Plus /></el-icon>
                立即申请
              </el-button>
            </div>

            <!-- 分页 -->
            <div class="pagination-wrapper" v-if="loans.length > 0">
              <el-pagination
                v-model:current-page="loanPagination.page"
                v-model:page-size="loanPagination.size"
                :page-sizes="[10, 20, 50]"
                :total="loanPagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="safeLoadData"
                @size-change="safeLoadData"
                class="modern-pagination"
              />
            </div>
          </div>
        </div>

        <!-- 右侧：还款计划 -->
        <div class="repayment-section">
          <div class="section-header-modern">
            <h2 class="section-title">即将到期</h2>
            <el-button :icon="Refresh" @click="loadRepaymentPlan" :loading="repaymentLoading" circle></el-button>
          </div>

          <div class="repayment-list" v-loading="repaymentLoading">
            <div class="repayment-card" v-for="plan in repaymentPlans" :key="plan.id">
              <div class="repayment-header">
                <div class="period-info">
                  <span class="period-number">第{{ plan.periodNumber }}期</span>
                  <el-tag 
                    :type="getRepaymentStatusType(plan.status)" 
                    size="small"
                  >
                    {{ getRepaymentStatusText(plan.status) }}
                  </el-tag>
                </div>
                <div class="repayment-amount">
                  <span class="amount-label">应还金额</span>
                  <span class="amount-value">¥{{ formatAmount(plan.repaymentAmount) }}</span>
                </div>
              </div>

              <div class="repayment-details">
                <div class="detail-row">
                  <span class="detail-icon">💰</span>
                  <span class="detail-text">本金 ¥{{ formatAmount(plan.principal) }}</span>
                </div>
                <div class="detail-row">
                  <span class="detail-icon">📈</span>
                  <span class="detail-text">利息 ¥{{ formatAmount(plan.interest) }}</span>
                </div>
                <div class="detail-row">
                  <span class="detail-icon">📅</span>
                  <span class="detail-text">应还日期 {{ formatDate(plan.repaymentDate) }}</span>
                </div>
              </div>

              <div class="repayment-actions" v-if="plan.status === 1">
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="repayLoanPeriod(plan)"
                  block
                >
                  <el-icon><Money /></el-icon>
                  立即还款
                </el-button>
              </div>
            </div>

            <!-- 还款计划空状态 -->
            <div class="empty-state-small" v-if="repaymentPlans.length === 0 && !repaymentLoading">
              <div class="empty-icon-small">📅</div>
              <p>暂无即将到期的还款</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 贷款申请弹窗 -->
      <LoanApplyDialog
        :visible="loanApplyDialog.visible"
        @update:visible="value => loanApplyDialog.visible = value"
        @confirm="confirmLoanApply"
      />

      <!-- 还款弹窗 -->
      <RepaymentDialog
        :visible="repaymentDialog.visible"
        :loan="repaymentDialog.loan"
        @update:visible="value => repaymentDialog.visible = value"
        @confirm="confirmRepayment"
      />

      <!-- 提前还款弹窗 -->
      <EarlyRepaymentDialog
        :visible="earlyRepaymentDialog.visible"
        :loan="earlyRepaymentDialog.loan"
        @update:visible="value => earlyRepaymentDialog.visible = value"
        @confirm="confirmEarlyRepayment"
      />

      <!-- 贷款详情弹窗 -->
      <LoanDetailDialog
        :visible="loanDetailDialog.visible"
        :loan="loanDetailDialog.loan"
        @update:visible="value => loanDetailDialog.visible = value"
      />

      <!-- 还款计划弹窗 -->
      <RepaymentPlanDialog
        :visible="repaymentPlanDialog.visible"
        :loan-id="repaymentPlanDialog.loanId"
        @update:visible="value => repaymentPlanDialog.visible = value"
      />
    </div>
  </Layout>
</template>

<script setup name="LoanView">
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { usePageLifecycle } from '@/composables/usePageLifecycle';
import { 
  CreditCard, 
  Wallet, 
  Calendar, 
  Files, 
  Plus, 
  Money, 
  Timer, 
  Refresh,
  ArrowRight,
  Document,
  View
} from '@element-plus/icons-vue';
import Layout from '@/components/layout/Layout.vue';
import LoanApplyDialog from '@/components/loan/LoanApplyDialog.vue';
import RepaymentDialog from '@/components/loan/RepaymentDialog.vue';
import EarlyRepaymentDialog from '@/components/loan/EarlyRepaymentDialog.vue';
import LoanDetailDialog from '@/components/loan/LoanDetailDialog.vue';
import RepaymentPlanDialog from '@/components/loan/RepaymentPlanDialog.vue';
import { 
  getLoanList, 
  getRepaymentPlan, 
  applyLoan, 
  repayLoan,
  earlyRepayment,
  getLoanDetail
} from '@/api/loan';

// 响应式数据
const loanSummary = ref({
  totalLoanAmount: 0,
  remainingAmount: 0,
  nextPaymentAmount: 0,
  nextPaymentDate: '',
  loanCount: 0
});

const loans = ref([]);
const loansLoading = ref(false);
const repaymentPlans = ref([]);
const repaymentLoading = ref(false);

// 筛选条件
const loanFilters = reactive({
  status: ''
});

// 分页
const loanPagination = reactive({
  page: 1,
  size: 10,
  total: 0
});

// 弹窗状态
const loanApplyDialog = reactive({
  visible: false
});

const repaymentDialog = reactive({
  visible: false,
  loan: null
});

const earlyRepaymentDialog = reactive({
  visible: false,
  loan: null
});

const loanDetailDialog = reactive({
  visible: false,
  loan: null
});

const repaymentPlanDialog = reactive({
  visible: false,
  loanId: null
});

// 计算属性
const hasActiveLoan = computed(() => {
  return loans.value.some(loan => loan.status === 3); // 还款中状态
});

const progressPercentage = computed(() => {
  if (loanSummary.value.totalLoanAmount === 0) return 0;
  const paidAmount = loanSummary.value.totalLoanAmount - loanSummary.value.remainingAmount;
  return Math.round((paidAmount / loanSummary.value.totalLoanAmount) * 100);
});

// 工具函数
const formatAmount = (amount) => {
  if (amount === undefined || amount === null) return '0.00';
  return parseFloat(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

const formatDate = (dateTime) => {
  if (!dateTime) return '-';
  const date = new Date(dateTime);
  return date.toLocaleDateString('zh-CN');
};

const getDaysUntilPayment = () => {
  if (!loanSummary.value.nextPaymentDate) return 0;
  const today = new Date();
  const paymentDate = new Date(loanSummary.value.nextPaymentDate);
  const diffTime = paymentDate - today;
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  return Math.max(0, diffDays);
};

const getPaymentUrgencyType = () => {
  const days = getDaysUntilPayment();
  if (days <= 3) return 'danger';
  if (days <= 7) return 'warning';
  return 'success';
};

const getActiveLoansCount = () => {
  return loans.value.filter(loan => loan.status === 3).length;
};

const getCompletedLoansCount = () => {
  return loans.value.filter(loan => loan.status === 4).length;
};

const calculateLoanProgress = (loan) => {
  if (loan.amount === 0) return 0;
  const paidAmount = loan.amount - loan.remainingPrincipal;
  return Math.round((paidAmount / loan.amount) * 100);
};

// 状态相关函数
const getLoanStatusText = (status) => {
  const statusMap = {
    1: '审核中',
    2: '已批准',
    3: '还款中',
    4: '已结清',
    5: '已拒绝'
  };
  return statusMap[status] || '未知';
};

const getLoanStatusType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'success',
    3: 'info',
    4: 'success',
    5: 'danger'
  };
  return typeMap[status] || 'info';
};

const getRepaymentMethodText = (method) => {
  const methodMap = {
    1: '等额本息',
    2: '等额本金',
    3: '一次性还本付息'
  };
  return methodMap[method] || '未知';
};

const getRepaymentStatusText = (status) => {
  const statusMap = {
    1: '待还款',
    2: '已还款',
    3: '逾期'
  };
  return statusMap[status] || '未知';
};

const getRepaymentStatusType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'success',
    3: 'danger'
  };
  return typeMap[status] || 'info';
};

// 数据加载方法
const loadLoanSummary = () => {
  // 基于贷款列表计算统计信息
  const totalLoanAmount = loans.value.reduce((sum, loan) => sum + (loan.amount || 0), 0);
  const remainingAmount = loans.value.reduce((sum, loan) => sum + (loan.remainingPrincipal || 0), 0);
  const loanCount = loans.value.length;
  
  // 查找最近的还款计划
  const nextPlan = repaymentPlans.value.find(plan => plan.status === 1);
  
  loanSummary.value = {
    totalLoanAmount,
    remainingAmount,
    nextPaymentAmount: nextPlan?.repaymentAmount || 0,
    nextPaymentDate: nextPlan ? formatDate(nextPlan.repaymentDate) : '',
    loanCount
  };
};

const loadLoans = async () => {
  loansLoading.value = true;
  try {
    const params = {
      page: loanPagination.page,
      size: loanPagination.size,
      status: loanFilters.status || undefined
    };
    
    // 清理undefined参数
    Object.keys(params).forEach(key => {
      if (params[key] === undefined) {
        delete params[key];
      }
    });
    
    const response = await getLoanList(params);
    loans.value = response.data.list || [];
    loanPagination.total = response.data.total || 0;
    
    // 加载完贷款列表后更新统计信息
    loadLoanSummary();
  } catch (error) {
    console.error('加载贷款列表失败：', error);
    ElMessage.error('加载贷款列表失败');
  } finally {
    loansLoading.value = false;
  }
};

const loadRepaymentPlan = async () => {
  repaymentLoading.value = true;
  try {
    // 获取最近的活跃贷款
    const activeLoan = loans.value.find(loan => loan.status === 3);
    if (!activeLoan) {
      repaymentPlans.value = [];
      return;
    }
    
    const response = await getRepaymentPlan(activeLoan.id);
    repaymentPlans.value = response.data.slice(0, 5) || []; // 只显示最近5期
    
    // 更新统计信息
    loadLoanSummary();
  } catch (error) {
    console.error('加载还款计划失败：', error);
    ElMessage.error('加载还款计划失败');
  } finally {
    repaymentLoading.value = false;
  }
};

// 弹窗操作方法
const showLoanApplyDialog = () => {
  loanApplyDialog.visible = true;
};

const showRepaymentDialog = () => {
  const activeLoan = loans.value.find(loan => loan.status === 3);
  if (!activeLoan) {
    ElMessage.warning('暂无进行中的贷款');
    return;
  }
  repaymentDialog.loan = activeLoan;
  repaymentDialog.visible = true;
};

const showEarlyRepaymentDialog = () => {
  const activeLoan = loans.value.find(loan => loan.status === 3);
  if (!activeLoan) {
    ElMessage.warning('暂无进行中的贷款');
    return;
  }
  earlyRepaymentDialog.loan = activeLoan;
  earlyRepaymentDialog.visible = true;
};

const showLoanDetail = async (loan) => {
  try {
    const response = await getLoanDetail(loan.id);
    loanDetailDialog.loan = response.data;
    loanDetailDialog.visible = true;
  } catch (error) {
    console.error('加载贷款详情失败：', error);
    ElMessage.error('加载贷款详情失败');
  }
};

const showRepaymentPlan = (loan) => {
  repaymentPlanDialog.loanId = loan.id;
  repaymentPlanDialog.visible = true;
};

const generateReport = () => {
  ElMessage.info('报告生成功能开发中...');
};

// 确认操作方法
const confirmLoanApply = async (formData) => {
  try {
    await applyLoan(formData);
    ElMessage.success('贷款申请提交成功');
    loanApplyDialog.visible = false;
    await safeLoadData();
  } catch (error) {
    console.error('贷款申请失败：', error);
  }
};

const confirmRepayment = async (formData) => {
  try {
    await repayLoan(formData);
    ElMessage.success('还款成功');
    repaymentDialog.visible = false;
    await safeLoadData();
    loadRepaymentPlan();
  } catch (error) {
    console.error('还款失败：', error);
  }
};

const confirmEarlyRepayment = async (formData) => {
  try {
    await earlyRepayment(formData);
    ElMessage.success('提前还款成功');
    earlyRepaymentDialog.visible = false;
    await safeLoadData();
    loadRepaymentPlan();
  } catch (error) {
    console.error('提前还款失败：', error);
  }
};

const repayLoanPeriod = async () => {
  try {
    const activeLoan = loans.value.find(loan => loan.status === 3);
    if (!activeLoan) {
      ElMessage.warning('找不到对应的贷款信息');
      return;
    }
    
    repaymentDialog.loan = activeLoan;
    repaymentDialog.visible = true;
  } catch (error) {
    console.error('还款操作失败：', error);
  }
};

// 使用页面生命周期管理
// 定义数据加载函数
const initializePageData = async () => {
  console.log('Initializing loans page data...');
  await loadLoans();
};

// 使用页面生命周期 composable
const { safeLoadData } = usePageLifecycle(initializePageData, {
  autoLoad: true,
  reloadOnRouteChange: true,
  delay: 50 // 较短的延迟以确保组件完全就绪
});
</script>

<style scoped>
/* 全局容器 */
.loan-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.header-content h1.page-title {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 600;
  background: linear-gradient(45deg, #fff, #e3f2fd);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.header-actions .primary-btn {
  background: linear-gradient(45deg, #ffffff, #f5f5f5);
  color: #667eea;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.header-actions .primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

/* 统计仪表板 */
.dashboard-section {
  padding: 0 24px;
  transform: translateY(-20px);
  margin-bottom: 30px;
  z-index: 10;
  position: relative;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.stat-card {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
}

.stat-card .card-decoration {
  position: absolute;
  top: -50%;
  right: -30%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.1;
  background: linear-gradient(45deg, #667eea, #764ba2);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: white;
  font-size: 28px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.stat-card.total-amount .stat-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card.remaining-amount .stat-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.next-payment .stat-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.loan-count .stat-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-content h3.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #2d3748, #4a5568);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 14px;
  color: #718096;
  margin-bottom: 12px;
  font-weight: 500;
}

.stat-trend, .next-payment-info, .loan-status-breakdown {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.trend-icon {
  font-size: 16px;
}

.trend-text {
  font-size: 12px;
  color: #48bb78;
  font-weight: 500;
}

.stat-progress {
  margin-top: 8px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 8px;
  transition: width 0.6s ease;
}

.progress-text {
  font-size: 12px;
  color: #4a5568;
  font-weight: 500;
}

.payment-date {
  font-size: 12px;
  color: #4a5568;
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.active {
  background-color: #48bb78;
}

.status-dot.completed {
  background-color: #38b2ac;
}

.status-item {
  font-size: 12px;
  color: #4a5568;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 快捷操作区域 */
.quick-actions-section {
  padding: 0 24px 40px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 20px 0;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.action-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(31, 38, 135, 0.1);
}

.action-card:hover:not(.disabled) {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(31, 38, 135, 0.2);
  border-color: #667eea;
}

.action-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f7fafc;
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.action-icon.repayment {
  background: linear-gradient(135deg, #48bb78, #38a169);
}

.action-icon.early-repayment {
  background: linear-gradient(135deg, #ed8936, #dd6b20);
}

.action-icon.refresh {
  background: linear-gradient(135deg, #4299e1, #3182ce);
}

.action-icon.report {
  background: linear-gradient(135deg, #9f7aea, #805ad5);
}

.action-content {
  flex: 1;
}

.action-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}

.action-content p {
  margin: 0;
  font-size: 14px;
  color: #718096;
}

.action-arrow {
  color: #a0aec0;
  font-size: 18px;
  transition: all 0.3s ease;
}

.action-card:hover:not(.disabled) .action-arrow {
  color: #667eea;
  transform: translateX(4px);
}

/* 主内容区域 */
.main-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  padding: 0 24px 40px;
}

.section-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-title-with-count {
  display: flex;
  align-items: center;
  gap: 12px;
}

.count-badge {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.section-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.filter-select {
  min-width: 140px;
}

/* 贷款列表 */
.loans-list {
  min-height: 400px;
}

.loan-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(31, 38, 135, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.loan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 35px rgba(31, 38, 135, 0.15);
  border-color: #667eea;
}

.loan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.loan-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loan-id {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
}

.status-tag {
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 500;
}

.loan-amount .amount-value {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loan-card-body {
  margin-bottom: 20px;
}

.loan-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.detail-icon {
  font-size: 18px;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-label {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
}

.detail-value {
  font-size: 14px;
  color: #1a202c;
  font-weight: 600;
}

/* 还款进度 */
.repayment-progress {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-label {
  font-size: 14px;
  color: #4a5568;
  font-weight: 500;
}

.progress-percentage {
  font-size: 14px;
  color: #667eea;
  font-weight: 600;
}

.progress-track {
  width: 100%;
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  transition: width 0.8s ease;
}

.loan-card-footer {
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-btn, .plan-btn, .repay-btn {
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.detail-btn {
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  color: #4a5568;
}

.detail-btn:hover {
  background: #edf2f7;
  border-color: #cbd5e0;
}

.plan-btn {
  background: #ebf8ff;
  border: 1px solid #bee3f8;
  color: #2b6cb0;
}

.plan-btn:hover {
  background: #bee3f8;
}

.repay-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
}

.repay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 16px;
  border: 2px dashed #e2e8f0;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #4a5568;
}

.empty-state p {
  margin: 0 0 24px 0;
  color: #718096;
  font-size: 14px;
}

.empty-state-small {
  text-align: center;
  padding: 40px 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.empty-icon-small {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-state-small p {
  margin: 0;
  color: #718096;
  font-size: 14px;
}

/* 分页 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(31, 38, 135, 0.05);
}

.modern-pagination :deep(.el-pagination) {
  --el-pagination-button-color: #667eea;
  --el-pagination-hover-color: #667eea;
}

/* 还款计划卡片 */
.repayment-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(31, 38, 135, 0.08);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.repayment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(31, 38, 135, 0.12);
  border-color: #667eea;
}

.repayment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.period-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.period-number {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}

.repayment-amount {
  text-align: right;
}

.amount-label {
  display: block;
  font-size: 12px;
  color: #718096;
  margin-bottom: 4px;
}

.repayment-amount .amount-value {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #48bb78, #38a169);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.repayment-details {
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #4a5568;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-text {
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .action-grid {
    grid-template-columns: 1fr;
  }
  
  .loan-details-grid {
    grid-template-columns: 1fr;
  }
  
  .section-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-select {
    width: 100%;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .loan-container {
    padding: 0;
  }
  
  .dashboard-section,
  .quick-actions-section,
  .main-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 24px 16px;
  }
  
  .loan-card,
  .repayment-card {
    padding: 16px;
  }
  
  .stat-card {
    padding: 20px;
  }
  
  .action-card {
    padding: 16px;
  }
}

/* 动画效果 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loan-card,
.repayment-card,
.stat-card,
.action-card {
  animation: slideUp 0.6s ease forwards;
}

.loan-card:nth-child(1) { animation-delay: 0.1s; }
.loan-card:nth-child(2) { animation-delay: 0.2s; }
.loan-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

/* 自定义滚动条 */
.loans-list::-webkit-scrollbar,
.repayment-list::-webkit-scrollbar {
  width: 6px;
}

.loans-list::-webkit-scrollbar-track,
.repayment-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.loans-list::-webkit-scrollbar-thumb,
.repayment-list::-webkit-scrollbar-thumb {
  background: #667eea;
  border-radius: 10px;
}

.loans-list::-webkit-scrollbar-thumb:hover,
.repayment-list::-webkit-scrollbar-thumb:hover {
  background: #5a6fd8;
}
</style>
